<style scoped>
.input_title{
    line-height: 30px;
    width: 400px;
}
.right .active{
    color:lightseagreen;
}
</style>
<template>
<div class="box">
    <h1>{{ title }}：</h1>
    <input class="input_title" type="text" v-model="data" @keyup.enter="onEnter" placeholder="例如：吃饭睡觉打豆豆； 提示：+回车可添加任务">
    <div class="menu">
        <span>{{allItem}}个任务未完成</span>
        <div ref='item' class="right">
            <span class="active">所有任务</span>
            <span>未完成的任务</span>
            <span>完成的任务</span>
        </div>
    </div>
    <ul>
        <li v-for="(item,index) in list" :key="index">
            <input type="checkbox" :value='item.id' v-model="checkboxs">{{item.msg}}
        </li>
    </ul>
</div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const {mapState,mapGetters,mapMutations} = createNamespacedHelpers('renwu');
export default {
    data:()=>({
        data:'',
        checkboxs:[]
    }),
    computed:{
        ...mapState(['title','list']),
        ...mapGetters(['allItem']),
    },
    methods:{
        ...mapMutations(['addList']),
        onEnter(){
            console.log('摁下了');
            // 存东西
            let arr = JSON.parse(JSON.stringify(this.list));
            console.log(arr);
            if(!this.data){
                arr.push({
                    msg:this.data,
                    status:1,
                    id:new Date().getTime()
                })
            }

            this.data = '';
        }
    },
    mounted(){
        let aItem = this.$refs.item.children;
        aItem.forEach(item=>{
            item.onclick = function(){
                aItem.forEach(item=>{
                    item.setAttribute('class','')
                })
                this.setAttribute('class','active')
            }
        })
    }
}
</script>